<template>
	<view>
		<view class="wrap-container">
			<!-- <view class="warp-input" v-for="(item,index) in inputData"> -->
			<view class="warp-input">
				<view class="warp-text">设备名称:</view>
				<u-input v-model="equipment_name" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备编号:</view>
				<u-input v-model="equip_id" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备型号:</view>
				<u-input v-model="equipment_typecode" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装日期:</view>
				<u-input v-model="usetime" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装位置:</view>
				<u-input v-model="useplace" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备坐标:</view>
				<u-input v-model="coordinate" :type="type" :border="border" :height="height" :disabled="true" />
				<u-button @click="navMap(coordinate,equipment_name)" style="margin-left: 24rpx;"
					type="primary">查看</u-button>
			</view>
			<view class="warp-input">
				<view class="warp-text">电耗:</view>
				<u-input v-model="energy_waste" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">状态:</view>
				<u-input v-model="status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">网络状态:</view>
				<u-input v-model="network_status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>

		</view>

		<view class="charts-box" v-for="(item, index) in chartsData" :key="index" :id="`chart${index}`"></view>

		<!-- 	<view class="charts-box" v-for="(tag, index) in tags" :key="index" :class="`chart-box-${index}`">
			<transition-group :name="`chart-transition-${index}`">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData[tag.id]" :key="index" />
			</transition-group>
		</view> -->
	</view>
</template>
<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {
				chartsData: [],
				id: "",
				type: 'text',
				height: 60,
				border: true,
				equipment_name: "",
				equip_id: "",
				equipment_typecode: "",
				usetime: "",
				useplace: "",
				status: "",
				energy_waste: "",
				network_status: "",
				coordinate: "",
				ntervalId: null, // 定时器的 ID
				refreshCount: 0, // 计数器，记录当前已经请求的次数
				tags: [],
				count: 5,

			}
		},

		onLoad(e) {
			this.startRefreshing(); // 在组件创建时开始定时刷新
			this.id = e.id
		},
		onReady() {
			this.getEqView();
		},
		beforeDestroy() {
			this.stopRefreshing(); // 在组件销毁前停止定时刷新
		},
		onUnload() {
			this.stopRefreshing();
		},
		methods: {
			fetchData() {
				// 模拟异步获取数据
				setTimeout(() => {
					this.chartsData = [{
							name: '化学需氧量',
							data: [120, 200, 150, 80, 70, 110, 130]
						},
						{
							name: '图表2',
							data: [220, 180, 190, 235, 290, 330, 310]
						},
						{
							name: '图表3',
							data: [220, 180, 190, 235, 290, 330, 310]
						}
						// 更多图表数据...
					]
					console.log(this.tags, "tagstagstags")
					this.chartsData = this.tags.map(item => ({
						name: item.tagDescribe,
						data: [120, 200, 150, 80, 70, 110, 130]
					}));
					this.$nextTick(() => {
						this.renderCharts()
					})
				}, 1000)
			},
			refreshData() {
				// this.$u.api.monitor({
				// 	"algorithmProcessId": "getAppMonitor",
				// 	"param": {
				// 		"data": {
				// 			structure_uuid: this.equip_id
				// 		}
				// 	}
				// }).then(response => {
				// 	this.tags = response.data.data.result.tags;
				// 	console.log(this.tags, "111111111111111111111111111")
				// 	this.fetchData()
				// }).catch(error => {
				// 	// 处理错误情况
				// 	console.error(error);
				// });
			},
			renderCharts() {
				this.chartsData.forEach((item, index) => {
					console.log(item, "~~~~~~~~~~~~~~~~~~~")
					const chartDom = document.getElementById(`chart${index}`)
					const myChart = echarts.init(chartDom)
					const option = {
						title: {
							text: item.name
						},
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: item.data,
							type: 'line',
							smooth: true
						}]
					}
					myChart.setOption(option)
				})
			},
			getEqView() {
				this.$u.api.eqView({
					"algorithmProcessId": "getEqview",
					"param": {
						"data": {
							id: this.id
						}
					}
				}).then(Response => {
					const res = Response.data.data.result[0]
					this.equipment_name = res.equipment_name
					this.equip_id = res.equip_id
					this.equipment_typecode = res.equipment_typecode
					this.usetime = res.usetime
					let coordinateArr = res.coordinate.split(",").map(item => item.trim());
					this.coordinate = (coordinateArr[0] && coordinateArr[1]) ? `${coordinateArr[0]},${coordinateArr[1]}` : '';

					this.useplace = res.useplace
					if (res.status) {
						let statusMap = {
							'1': '异常',
							'2': '运行',
							'3': '停止',
							'4': '维修维护'
						};
						this.status = statusMap[res.status]
					}
					if (res.network_status) {
						let netMap = {
							'1': '运行',
							'0': '在线',
						};
						this.network_status = netMap[res.network_status]
					}
				})
			},
			startRefreshing() {
				const interval = 5000; // 1秒等于1000毫秒

				// 设置定时器，每隔1秒执行一次refreshData方法
				this.intervalId = setInterval(() => {
					this.refreshData();
				}, interval);
			},
			stopRefreshing() {
				clearInterval(this.intervalId); // 停止定时器
			},

			// valuesByIndex(id) {
			// 	return this[`values${id}`] || (this[`values${id}`] = []);
			// },
			// timesListByIndex(id) {
			// 	return this[`timesList${id}`] || (this[`timesList${id}`] = []);
			// },
			// generateChartData() {
			// 	this.tags.forEach((tag, index) => {
			// 		const valuesList = this.valuesByIndex(tag.id);
			// 		const timesList = this.timesListByIndex(tag.id);

			// 		const values = tag.value;
			// 		const tagDescribe = tag.tagDescribe;
			// 		const times = tag.times;
			// 		const timePart = times.substring(11, 19);

			// 		valuesList.push(values);
			// 		timesList.push(timePart);
			// 		if (valuesList.length > 5) {
			// 			valuesList.shift();
			// 		}
			// 		if (timesList.length > 5) {
			// 			timesList.shift();
			// 		}

			// 		const dataSeries = {
			// 			name: tagDescribe,
			// 			data: [...valuesList],
			// 		};

			// 		const chartData = {
			// 			categories: timesList,
			// 			series: [dataSeries],
			// 		};
			// 		this.$set(this.chartData, tag.id, chartData);
			// 	});
			// },
			// 	getServerData(timesList) {
			// 		//模拟从服务器获取数据时的延时
			// 		setTimeout(() => {
			// 				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// 				let res = {
			// 					categories: timesList,
			// 					series: this.series
			// 			}; 
			// 			this.chartData = JSON.parse(JSON.stringify(res));
			// 		}, 500);
			// },
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			navMap(coordinate, equipment_name) {
				console.log("111")
				uni.navigateTo({
					url: "/pages/sys/workbench/install?coordinate=" + coordinate + "&equipment_name=" +
						equipment_name
				});

			},
		}
	}
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
		padding: 34rpx 0 0 34rpx;
	}


	.wrap-container {
		width: 93%;
		height: 880rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-top: 12rpx;
		margin-bottom: 48rpx;


		.warp-input {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 24rpx 0;

			.warp-text {
				width: 24%;
				text-align: right;
				padding-right: 24rpx;
			}
		}
	}


	.charts-box {
		width: 93%;
		height: 530rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 48rpx;
	}

	.chart-transition-1-enter-active,
	.chart-transition-1-leave-active,
	.chart-transition-2-enter-active,
	.chart-transition-2-leave-active,
	/* 更多的动画样式... */
		{
		transition: transform 0.5s;
	}

	.chart-transition-1-enter,
	.chart-transition-1-leave-to,
	.chart-transition-2-enter,
	.chart-transition-2-leave-to,
	/* 更多的动画样式... */
		{
		transform: translateX(-100%);
	}
</style>